<template>
  <div>
    <datetime
      v-model="val"
      v-bind:start-date="startDate"
      :readonly="abPermission==='r'"
      :format="format|| currentFormat"
      v-bind:end-date="endDate"
      clear-text="长期"
      @on-clear="getClear">
      <!-- vux-cell-primary vux-datetime-value-->
      <div class="weui-cell__ft vux-cell-primary vux-datetime-value">
        <span v-if="textShow" class="vux-cell-value">
          {{ textShow }}
        </span>
        <span v-else class="vux-cell-placeholder">{{ placeholder ? placeholder : '请选择' }}</span>
        <!--        <i class="vux-input-icon weui-icon weui_icon_warn weui-icon-warn" style="display: none;"></i>-->
        <!--        <x-icon fill="#C8C8CD" type="ios-arrow-down" size="20"></x-icon>-->
        <!--        <x-icon fill="#C8C8CD" v-if="!showPopupPicker && !disabled" type="ios-arrow-right" size="20"></x-icon>-->
      </div>
    </datetime>
  </div>
</template>

<script>
import Vue from 'vue'
import {Datetime} from 'vux'

Vue.component('datetime', Datetime)

export default {
  props: ['value', "min", "max", "minformat", "maxformat", "cal", "caltype", "abPermission", "format", "abFormat", "placeholder"],
  data: function () {
    return {
      val: this.value,
      startDate: "",
      endDate: "",
      currentFormat: 'YYYY-MM-DD HH:mm',
      textShow: ''

    }
  },
  created: function () {

    //yyyy-MM-dd HH:mm:ss
    // 兼容 vux 的特殊格式化
    if (this.abFormat) {

      var format = this.abFormat.toUpperCase();
      format = format.replaceAll("SS", "")
      format = format.replaceAll(":MM", ":mm")
      this.currentFormat = format;
    }
  },
  mounted: function () {
    this.handleMin();
    this.handleMax();
    this.gettext()
  },
  methods: {
    //计算差距 拿最小值跟自身比较
    handleCal() {
      if (!this.min || !this.val) {
        this.$emit('update:cal', "");
        return;
      }
      var minformat = this.minformat || 'yyyy-MM-dd HH:mm';
      var maxformat = this.maxformat || 'yyyy-MM-dd HH:mm';
      if (minformat === 'yyyy-MM-dd HH:mm:ss') {
        minformat = 'yyyy-MM-dd HH:mm';
      }
      if (maxformat === 'yyyy-MM-dd HH:mm:ss') {
        maxformat = 'yyyy-MM-dd HH:mm';
      }
      var rtl = this.min.toDate(minformat).between(this.val.toDate(maxformat), this.caltype);
      this.$emit('update:cal', rtl);
    },
    handleMin() {
      this.handleCal();
      if (!this.min) {
        this.startDate = "1900-01-01";
        return;
      }
      var date = this.min.toDate(this.minformat);
      this.startDate = date.format("yyyy-MM-dd");
    },
    handleMax() {
      this.endDate = "2099-12-31";
      // 		if(!this.max){
      // 	this.endDate = "2099-12-31";
      // 	return;
      // }
      // var date = this.max.toDate(this.maxformat);
      // this.endDate = date.format("yyyy-MM-dd");
    },
    getClear() {
      this.val = '9999-12-31'
    },
    gettext() {
      this.textShow = (this.val === '9999-12-31') ? '长期' : this.val
    }
  },
  watch: {
    val: function (newVal, oldVal) {
      this.$emit('input', this.val);
      this.gettext()
      this.handleCal();
    },
    value: function (newVal, oldVal) {
      this.val = newVal;
    },
    min: function (newVal, oldVal) {
      this.handleMin();
    },
    max: function (newVal, oldVal) {
      this.handleMax();
    }
  }

}
</script>
<style lang="less" scoped>

</style>
